<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <input type="text" id="input">
    <script>
        //节流：事件触发，n秒内仅执行一次，事件触发多次n秒内也仅执行一次，作用于鼠标事件
      

        //节流函数
    //     function flow (fn,delay = 1000){
    //         var lastTime = 0 ;
    //         return function(){
    //             var timeNow = Date.now()
    //             if(timeNow-lastTime >= delay){
    //                 console.log('hahha')
    //                 //修改指向问题 call-apply - bind
    //             fn.apply(this,arguments)
    //             lastTime =timeNow
    //             }
            
    //         }
    //     }
    // document.onscroll =flow(function(event){
    //     console.log('执行')
    //     //fn没有调用者，默认指向window
    //     console.log(this)
    // })

          //防抖 ： 事件触发，定时器n秒内被执行多次，前面会被销毁，作用于键盘事件,内容输入
          var inputEle = document.getElementById('input')
          function prevent(fn,delay= 1000){
            var timer
            return function(){
                var context = this
                var ares = arguments
                clearTimeout(timer)
              timer= setTimeout(function(){
                fn.apply(context,ares)
               },delay)
            }
          }
          input.onkeyup = prevent(
            function(event){
            console.log(this)
            console.log(event)
            console.log('haha')
          }
          )
    </script>
  </body>
</html>
